<template>
  <div>
    <el-row class="bg_write" style="overflow: auto">
      <el-row>
        <el-col :span="24" class="content_title">
          <el-col :span="12">
            <HeadTitle></HeadTitle>
          </el-col>
          <el-col :span="24"></el-col>
        </el-col>
      </el-row>
      <el-row class="home">
        <el-col :span="24" class="home_box">
          <div class="phone">
            <div
              class="shops-box-bg"
              :style="{ background: toZ(supplier_background) }"
            ></div>

            <div @click="control_show('head')">
              <shopsHead
                style="z-index: 9"
                :size_color="size_color"
                :size_color1="size_color1"
                :header_iconList="header_iconList"
              />

              <div
                class="index_control index_head"
                v-show="head_show"
                style="margin-top: 65px"
              >
                <div class="control_item control_sanjiao on">
                  <el-form>
                    <el-form-item
                      label="导航类别："
                      :label-width="formLabelWidth"
                    >
                      <el-col :span="20">
                        <el-radio v-model="supplier_isshop" label="0"
                          >查找商家</el-radio
                        >
                        <el-radio v-model="supplier_isshop" label="1"
                          >查找商品</el-radio
                        >
                        <el-radio v-model="supplier_isshop" label="2"
                          >不显示类别</el-radio
                        >
                      </el-col>
                    </el-form-item>

                    <el-form-item
                      label="背景图片："
                      :label-width="formLabelWidth"
                    >
                      <el-col :span="16">
                        <!-- <el-input
                          v-model="supplier_background"
                          autocomplete="off"
                          class="mar_bottom_5"
                        >
                          <template slot="prepend">
                            <el-color-picker
                              v-model="supplier_background"
                              size="mini"
                            ></el-color-picker>
                          </template>
                        </el-input> -->
                        <uploadpic
                          :piclink="supplier_background"
                          :width="375"
                          :height="'不限'"
                          :real_width="750"
                          :real_height="'auto'"
                          :is_more="false"
                          @send_pic="onSuccess"
                        ></uploadpic>
                      </el-col>
                    </el-form-item>

                    <el-form-item
                      label="字体颜色："
                      :label-width="formLabelWidth"
                    >
                      <el-col :span="16">
                        <el-input
                          v-model="size_color"
                          autocomplete="off"
                          class="mar_bottom_5"
                        >
                          <template slot="prepend">
                            <el-color-picker
                              v-model="size_color"
                              size="mini"
                            ></el-color-picker>
                          </template>
                        </el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item
                      label="图标颜色："
                      :label-width="formLabelWidth"
                    >
                      <el-col :span="16">
                        <el-input
                          v-model="size_color1"
                          autocomplete="off"
                          class="mar_bottom_5"
                        >
                          <template slot="prepend">
                            <el-color-picker
                              v-model="size_color1"
                              size="mini"
                            ></el-color-picker>
                          </template>
                        </el-input>
                      </el-col>
                    </el-form-item>
                    <upcard :data="header_iconList" cart="headerList"> </upcard>
                  </el-form>
                </div>
              </div>
            </div>

            <div class="merchant_body">
              <div class="merchant_carousel">
                <div class="block" @click="control_show('carousel')">
                  <el-carousel height="150px">
                    <el-carousel-item
                      v-for="(item, i) in carousel_list.banner"
                      :key="i"
                    >
                      <img
                        style="width: 100%"
                        :src="$fnc.getImgUrl(item.piclink)"
                      />
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div
                  class="index_control index_head"
                  v-show="carousel_show"
                  style="margin-top: 260px"
                >
                  <div class="control_item control_sanjiao on">
                    <el-form>
                      <el-form-item
                        label="栏目是否显示"
                        :label-width="formLabelWidth"
                      >
                        <el-col :span="12">
                          <el-switch
                            v-model="carousel_list.is_show"
                            active-color="#13ce66"
                            inactive-color="#999999"
                            class="hone_switch"
                            :width="70"
                            active-value="1"
                            inactive-value="0"
                          ></el-switch>
                        </el-col>
                        <el-col
                          :span="12"
                          class="tr pd_right_15 sizeColor_red"
                        ></el-col>
                      </el-form-item>
                      <upcard
                        class="banner"
                        @sendDel="getSendDel"
                        @send_baner_id="get_banner_id"
                        :data="carousel_list.banner"
                        :cart="list_card"
                      >
                      </upcard>
                    </el-form>
                  </div>
                </div>
              </div>
              <div class="merchant_top">
                <div class="merchant_top_box" @click="control_show('menu')">
                  <div
                    class="merchant_item"
                    v-for="(item, i) in menu_list.banner"
                    :key="i"
                  >
                    <div class="merchant_item_box">
                      <img :src="$fnc.getImgUrl(item.piclink)" alt />
                      <p>{{ item.title }}</p>
                    </div>
                  </div>
                </div>
                <div
                  class="index_control index_head"
                  style="margin-top: 60px"
                  v-show="menu_show"
                >
                  <div class="control_item control_sanjiao on">
                    <el-form>
                      <el-form-item
                        label="栏目是否显示"
                        :label-width="formLabelWidth"
                      >
                        <el-col :span="12">
                          <el-switch
                            v-model="menu_list.is_show"
                            active-color="#13ce66"
                            inactive-color="#999999"
                            class="hone_switch"
                            :width="70"
                            active-value="1"
                            inactive-value="0"
                          ></el-switch>
                        </el-col>
                        <el-col
                          :span="12"
                          class="tr pd_right_15 sizeColor_red"
                        ></el-col>
                      </el-form-item>
                      <upcard
                        class="menu"
                        :is_index="true"
                        @sendDel="getSendDel"
                        @send_baner_id="get_banner_id"
                        :data="menu_list.banner"
                        :cart="list_menu"
                      ></upcard>
                    </el-form>
                  </div>
                </div>
              </div>

              <div class="shops-model">
                <all-module-item
                  @del_banner="get_banner_id"
                  @show_btn="control_show"
                  @getSendDel="getSendDel"
                  @del_part="del_part"
                  :partListCon="partList"
                />
              </div>

              <div class="phone_shop" @click="control_show('shop')">
                <div class="phone_shop_body">
                  <div class="phone_shop_content">
                    <merchantItem :shopList="shopList" />
                  </div>

                  <div class="index_control index_head" v-show="shopListShow">
                    <div class="control_item control_sanjiao on">
                      <el-form>
                        <el-form-item
                          label="栏目是否显示"
                          :label-width="formLabelWidth"
                        >
                          <el-col :span="12">
                            <!--是否显示本栏目-->
                            <el-switch
                              v-model="shopList.is_show"
                              active-color="#13ce66"
                              inactive-color="#999999"
                              :width="70"
                              class="hone_switch"
                              active-value="1"
                              inactive-value="0"
                            ></el-switch>
                          </el-col>
                          <el-col
                            :span="12"
                            class="tr pd_right_15 sizeColor_red"
                          >
                          </el-col>
                        </el-form-item>
                        <el-form-item
                          label="主标题"
                          :label-width="formLabelWidth"
                        >
                          <el-col :span="12">
                            <el-input
                              v-model="shopList.title"
                              autocomplete="off"
                            ></el-input>
                          </el-col>
                        </el-form-item>
                        <el-form-item
                          label="副标题"
                          :label-width="formLabelWidth"
                        >
                          <el-col :span="12">
                            <el-input
                              v-model="shopList.title_en"
                              autocomplete="off"
                            ></el-input>
                          </el-col>
                        </el-form-item>
                        <upcard
                          @setId="setId"
                          :is_index="true"
                          class="shop shop"
                          @sendDel="getDelShop"
                          :data="shopList.pro"
                          :cart="list_item"
                        >
                        </upcard>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>

              <div class="merchant_shop">
                <div
                  class="merchant_shop_box"
                  @click="control_show('merchant')"
                >
                  <div
                    class="merchant_shop_item"
                    v-for="(item, i) in merchant_list.pro"
                    :key="i"
                  >
                    <div class="merchant_shop_title">
                      <p>
                        {{ item.shop_title }}
                        <span>推荐</span>
                      </p>
                      <i class="el-icon-position"></i>
                    </div>
                    <div class="merchant_shop_rate">
                      <div class="merchant_shop_left">
                        <p>
                          评级:
                          <el-rate
                            v-model="star"
                            disabled
                            text-color="#ff9900"
                          ></el-rate>
                        </p>
                        <p>
                          商品:
                          <span>35</span>件
                        </p>
                      </div>
                      <p>距离:35KM</p>
                    </div>
                    <p><span>推荐</span>满22减20,满22减20</p>
                    <div class="merchant_shop_goods">
                      <div
                        class="merchant_shop_goods_item"
                        v-for="(shop, k) in item.product_lists"
                        :key="k"
                      >
                        <img :src="$fnc.getImgUrl(shop.piclink)" alt />
                        <p>{{ shop.title }}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="index_control index_head"
                  v-show="merchant_show"
                  style="margin-top: 1220px;margin-bottom50px;"
                >
                  <div class="control_item control_sanjiao on">
                    <el-form>
                      <p
                        style="
                          padding-left: 25px;
                          text-align: left;
                          line-height: 50px;
                        "
                      >
                        添加商户：
                      </p>
                      <upcard
                        class="banner"
                        @sendDel="getSendDel"
                        @send_add_merchant_id="get_add_mer_id"
                        @send_del_merchant_id="get_del_mer_id"
                        :data="merchant_list.pro"
                        :cart="list_merchant"
                      ></upcard>
                    </el-form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-col :span="22" class="men_add">
      <el-card shadow="always">
        <el-button
          :loading="$store.state.isLoading"
          @click="save"
          @keydown.13="save"
          >保存</el-button
        >
      </el-card>
    </el-col>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import upcard from "@/components/currency/IndexSet_upload.vue";
import { Tab, Tabs } from "vant";
import merchantItem from "./merchant-item/merchant-item";
import "vant/lib/index.css";
import allModuleItem from "@/components/currency/page/all-module-item/all-module-item";
import shopsHead from "./merchant-item/shops-head";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  name: "merchant",
  data() {
    return {
      supplier_isshop: 1,
      supplier_background: "",
      size_color: "#fff",
      size_color1: "#333",
      supplier_range: "",
      supplier_home: "",
      del_banner: "",
      del_module: "",
      del_item: {
        delbannerList: [],
        delmenuList: [],
        delshopList: [],
        delpartList: [],
      },
      // 模块
      style_option: [
        {
          label: "1行1图",
          value: "0",
        },
        {
          label: "1行2图",
          value: "1",
        },
        {
          label: "1行3图",
          value: "2",
        },
        {
          label: "1+2",
          value: "3",
        },
      ],
      partList: [
        // {
        //   banner: [
        //   ],
        //   title: "",
        //   title_en: ""
        // }
      ],
      shopList: {
        is_show: "1",
        title: null,
        title_en: null,
        types: "product",
        pro: [
          {
            title: "",
          },
        ],
      },
      shopListShow: false,
      list_merchant: "list_merchant",
      list_card: "list_card",
      list_menu: "list_menu",
      list_item: "list",
      merchant_show: true,
      carousel_show: false,
      menu_show: false,
      head_show: false,
      star: 4.0,
      menu_list: {
        is_show: "",
        banner: [
          {
            title: null,
            piclink: null,
          },
        ],
      },
      carousel_list: {
        banner: [
          {
            id: null,
            title: null,
            piclink: null,
          },
        ],
      },
      merchant_list: {
        pro: [
          {
            distance: "",
            id: "",
            product_lists: [],
            product_number: "",
            shop_address: "",
            shop_area: "",
            shop_cate: "",
            shop_city: "",
            shop_fee: "",
            shop_referrer: "",
            shop_latitude: "",
            shop_logo: "",
            shop_longitude: "",
            shop_province: "",
            shop_recommend: "",
            shop_tel: "",
            shop_title: "",
            shop_wechat: "",
          },
        ],
      },
      formLabelWidth: "120px",
      header_iconList: [
        {
          title: "",
          id: "",
        },
        {
          title: "",
          id: "",
        },
      ],
    };
  },
  components: {
    HeadTitle,
    upcard,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    merchantItem,
    allModuleItem,
    shopsHead,
    uploadpic,
  },
  created() {
    this.get_merchant_list();
  },
  methods: {
    toZ(str) {
      if (str.indexOf("#") >= 0) {
        return str;
      } else {
        return "url(" + str + ") no-repeat";
      }
    },
    onSuccess(pic) {
      this.supplier_background = pic;
    },
    show_btn(id, Item) {
      //显示 修改窗口按钮
      this.partList.forEach(function (item) {
        item.part_show = false;
      });

      switch (id) {
        case 5:
          Item.part_show = true;
          break;
        case 6:
          this.shopListShow = true;
          break;
        case 7:
          this.footer_show = true;
          break;
        case 8:
          this.copyright_show = true;
          break;
      }
    },
    add_part() {
      this.partList.push({
        id: "0",
        is_show: "1",
        part_show: false,
        title: "",
        title_en: "",
        style: "0",
        types: "module",
        sort: "0",
        banner: [
          {
            id: "",
            cate: "",
            title: "",
            piclink: "",
            links: "",
            desc: "",
            sort: "0",
          },
        ],
      });
    },
    setId(od) {
      this.$api.getPage.change_shop({ id: od, iden: "supplier" });
    },
    get_add_mer_id(id) {
      this.$api.getPage.add_merchantlist({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("修改成功");
          this.get_merchant_list();
        } else {
          this.$fnc.alertError(res.data.result);
          this.get_merchant_list();
        }
      });
    },
    get_del_mer_id(val) {
      this.$api.getPage.del_merchantlist({ id: val.id }).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("修改成功");
          this.get_merchant_list();
        } else {
          this.$fnc.alertError(res.data.result);
          this.get_merchant_list();
        }
      });
    },

    del_merchant() {},
    add_merchant() {
      this.$api.getPage.add_merchantlist({}).then((res) => {});
    },
    control_show(Item, str) {
      this.menu_show = false;
      this.carousel_show = false;
      this.merchant_show = false;
      this.shopListShow = false;
      this.head_show = false;

      this.partList.forEach(function (item) {
        item.part_show = false;
      });

      if (Item == "menu") {
        this.menu_show = true;
      } else if (Item == "carousel") {
        this.carousel_show = true;
      } else if (Item == "merchant") {
        this.merchant_show = true;
      } else if (Item == "shop") {
        this.shopListShow = true;
      } else if (Item == 5) {
        str.part_show = true;
      } else if (Item == "head") {
        this.head_show = true;
      }
      console.log(Item);
    },
    save() {
      var temp = {};
      temp.navigation = JSON.stringify(this.menu_list);
      temp.slide = JSON.stringify(this.carousel_list);

      var obj = JSON.parse(JSON.stringify(this.shopList));

      delete obj.pro;

      temp.product = JSON.stringify(obj);

      temp.module = JSON.stringify(this.partList);

      temp.del_banner = this.del_banner;
      temp.del_module = this.del_module;
      temp.supplier_range = this.supplier_range;
      temp.supplier_home = this.supplier_home;
      temp.supplier_isshop = this.supplier_isshop;
      temp.supplier_background = this.supplier_background;
      temp.size_color = this.size_color + "|" + this.size_color1;
      temp.header = JSON.stringify(this.header_iconList);
      //   temp.navigation = JSON.stringify(this.menu_list);
      this.$api.getPage.edit_merchantlist(temp).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("修改成功");
          this.get_merchant_list();
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    getDelShop(obj) {
      if (obj.id == 0 || obj.id == undefined) return;
      this.$api.getShops.delSupplierProduct({ id: obj.id });
    },
    getSendDel(obj) {
      if (obj.id == 0 || obj.id == undefined) return;
      switch (obj.title) {
        case "menu":
          this.del_item.delmenuList.push(obj.id);

          break;

        case "banner":
          this.del_item.delbannerList.push(obj.id);
          break;
      }
    },
    get_banner_id(item) {
      if (item.id != 0 && item.id != undefined) {
        this.del_banner += item.id + "@";
      }
    },
    get_merchant_list() {
      this.$api.getPage.get_merchantlist({}).then((res) => {
        if (res.data.code == 200) {
          this.menu_list = res.data.result.info.navigation;
          this.carousel_list = res.data.result.info.slide;
          this.merchant_list = res.data.result.info.merchant;
          this.supplier_home = res.data.result.supplier_home;
          this.supplier_isshop = res.data.result.supplier_isshop;

          if (res.data.result.headers && res.data.result.headers.length > 0) {
            this.header_iconList = [];
            if (res.data.result.headers && res.data.result.headers[0]) {
              this.header_iconList.push(res.data.result.headers[0]);
            }
            if (res.data.result.headers && res.data.result.headers[1]) {
              this.header_iconList.push(res.data.result.headers[1]);
            }
            if (res.data.result.module) {
              this.partList = res.data.result.module;
            }
          }

          this.supplier_background = res.data.result.supplier_background || "";
          // if (res.data.result.supplier_background) {
          //   if (res.data.result.supplier_background.indexOf("#") >= 0) {
          //     this.supplier_background = res.data.result.supplier_background;
          //   } else {
          //     this.supplier_background =
          //       "url(" + res.data.result.supplier_background + ") no-repeat";
          //   }
          // }
          this.supplier_range = res.data.result.supplier_range;

          this.shopList = res.data.result.info.product;
          var colors = res.data.result.size_color;
          if (colors.split("|")[0]) {
            this.size_color = colors.split("|")[0];
          }
          if (colors.split("|")[1]) {
            this.size_color1 = colors.split("|")[1];
          }
        }
      });
    },
    del_part(id) {
      //删除模块
      if (id != 0) {
        this.del_module += id + "@";
      }
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/page.css";
.transitionBody > div {
  overflow: auto;
}
.merchant_body {
  width: 100%;
  background-color: #fff;
}
.merchant_top {
  position: relative;
  /* background: linear-gradient(to bottom, #fff 60%, #f4f4f4); */
  border: 1px solid transparent;
  margin: 10px 0;
  border-radius: 10px;
}
.merchant_top:hover {
  border: 1px dashed red;
}
.merchant_top_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
}
.merchant_item {
  width: 20%;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.merchant_item_box {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: center;
}
.merchant_item_box img {
  width: 40px;
  margin: 0 auto;
}
.merchant_item_box p {
  font-size: 14px;
  color: #999999;
  padding-top: 5px;
}

/*幻灯片*/
.merchant_carousel {
  /* width: 95%; */
  margin: 10px;
  /* background: #fff; */
}
.merchant_carousel > .block {
  border: 1px solid transparent;
}
.merchant_carousel > .block:hover {
  border: 1px dashed red;
}
.el-carousel__item {
  border-radius: 10px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/*店铺列表*/
.merchant_shop {
  width: 100%;
  background: #f4f4f4;
}
.merchant_shop_box {
  width: 100%;

  padding-bottom: 15px;
  border: 1px solid transparent;
  display: relative;
  margin-bottom: 50px;
}
.phone_shop {
  margin: 0 10px 0;
  border-radius: 10px;
}
.phone_shop_body {
  border: 1px solid transparent;
  position: relative;
}
.phone_shop_body:hover {
  border: 1px dashed red;
}
.merchant_shop_box:hover {
  border: 1px dashed red;
}
.merchant_shop_item {
  background-color: #ffffff;
  padding: 15px 10px;
  border-radius: 10px;
  margin: 15px 10px 0;
}
.merchant_shop_title {
  height: 30px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.merchant_shop_title > p {
  font-size: 16px;
  color: #000000;
  font-weight: bold;
}
.merchant_shop_title > p span {
  background-color: #fab81c;
  font-size: 14px;
  color: #000000;
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 10px;
}

.merchant_shop_rate {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}
.merchant_shop_left {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.merchant_shop_left > p {
  display: flex;
  font-size: 12px;
  color: #999999;
}
.merchant_shop_left > p span {
  font-size: 12px;
  color: #ff9900;
  padding-left: 5px;
}
.merchant_shop_rate > p {
  font-size: 12px;
  color: #999999;
}
.merchant_shop_item > p {
  width: 100%;
  font-size: 12px;
  color: #000000;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.merchant_shop_item > p > span {
  background-color: #f04e43;
  font-size: 14px;
  color: #ffffff;
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 5px;
}
.merchant_shop_goods {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.merchant_shop_goods_item {
  width: 31%;
  margin-right: 12px;
}
.merchant_shop_goods_item img {
  width: 100%;

  border-radius: 10px;
}
.merchant_shop_goods_item p {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone_shop_body {
  background: #fff;
}
.shops-box-bg {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 130px;
  background: linear-gradient(to bottom, #ffca00 60%, #f4f4f4);
}

.phone_part {
  background-color: white;
  margin: 10px 10px 0;
  border-radius: 10px;
  position: absolute;
  border: 1px solid transparent;
}
.phone_part_body {
  width: 94%;
  margin: 0 auto;
}
.phone_part:hover {
  border: 1px dashed red;
}
.phone_title {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.phone_title p {
  font-size: 20px;
  color: #2f2f2f;
  font-weight: bold;
  padding: 5px 0;
}
.phone_title span {
  font-size: 14px;
  color: #d4d4d4;
  font-weight: 400;
}
.phone_part_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.phone_part_one_img {
  width: 100%;
  /* padding-bottom: 10px; */
}
.phone_part_one_img a {
  display: block;
}
.phone_part_one_img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.phone_part_two_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.phone_part_two_img {
  width: 48%;
  padding: 5px 0;
}
.phone_part_two_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_three_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.phone_part_three_img {
  width: 32%;
  padding: 5px 0;
}
.phone_part_three_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_four_img:nth-of-type(3n + 1) {
  width: 100%;
  border-radius: 8px;
  padding: 5px 0;
}

.phone_part_four_img:nth-of-type(3n + 2),
.phone_part_four_img:nth-of-type(3n + 3) {
  width: 48%;
  border-radius: 8px;
  padding: 5px 0;
}
.phone_part_four_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_five_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 300px;
}
.phone_part_five_left {
  width: 49%;
  height: 100%;
  border-radius: 8px;
}
.phone_part_five_left_img {
  width: 100%;
  height: 100%;
  padding: 5px 0;
}
.phone_part_five_right {
  width: 49%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.phone_part_five_right_img {
  width: 100%;
  height: 50%;
  padding: 5px 0;
}
.phone_part_five_left_img img,
.phone_part_five_right_img img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.shops-model {
  /* background: #fff; */
  /* overflow: hidden; */
}
.phone_part {
  /* overflow: hidden; */
  background-color: transparent;
}
.phone_title {
  margin: 10px 0;
}
.phone_part {
  width: auto;
  margin: 10px 0px 0;
  border-radius: 10px;
}
</style>
